import { useState, type JSX } from 'react';

const Card = ({ children }: { children: React.ReactNode }) => {
  const cardStyle: React.CSSProperties = {
    padding: '16px',
    border: '1px solid #ccc',
    borderRadius: '8px',
    backgroundColor: '#fff',
    color: '#333',
    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 1000,
    width: '300px',
    height: '300px',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  };
  const [isOpen, setIsOpen] = useState(true);

  setTimeout(() => {
    setIsOpen(false);
  }, 3000);

  return isOpen ? <div style={cardStyle}>{children}</div> : null;
};

const Modal = {
  useModal: () => {
    const [state, setState] = useState(<>hello world</>);
    const modalContextHolder = <div> {state} </div>;
    function confirm() {
      console.log('confirm');
      setState(<Card children="confirm" />);
    }
    function info() {
      console.log('info');
      setState(<Card children="info" />);
    }
    function success() {
      console.log('success');
      setState(<Card children="success" />);
    }
    function error() {
      console.log('error');
      setState(<Card children="error" />);
    }
    function warning() {
      console.log('warning');
      setState(<Card children="warning" />);
    }
    return [
      {
        confirm,
        info,
        success,
        error,
        warning,
      },
      modalContextHolder,
    ] as [
      {
        confirm: () => void;
        info: () => void;
        success: () => void;
        error: () => void;
        warning: () => void;
      },
      JSX.Element,
    ];
  },
};

export default Modal;
